<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> 
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <base href="#" target="_blank">
    <title>幻视电影</title>
</head>
<style>
	body{
		
		cursor: pointer;
	}
	.announce{
		list-style: none;
	}
</style>
<body>
    <!-- 头部导航 -->
    <nav class="header">
        <div class="contain">
            <!-- logo区 -->
            <a href="#" class="logo"><h1>环视电影</h1></a>
            <!-- 列表 -->
            <ul>
                <li><a href="MovieFirstServlet">首页</a></li>
                 <li style="width:200px">用户:&nbsp;<a href="OrderServlet" class="user">${user }</a></li>
                <!-- 搜索区 -->
            <form action="SerchServlet" class="serch-form" method="get">
                <input type="search" name="search" class="search" placeholder="找影视剧 ">
                <input type="submit" class="submit" value="搜索">
            </form>
            </ul>
        </div>
    </nav>
    <!-- 横幅广告开始 -->
    <div class="canner-wrap">
        <div class="canner-fl fl">
            <p>
                <a href="">最新通知<span class="arrow-r">></span></a>
                <span class="more-info">
                    <span class="msg">1.上新电影</span>
                    <span class="msg">2.系统更新</span>
                    <span class="msg">3.尽情期待</span>
        
                </span>
            </p>
            <p>
                <a href="">电影推荐<span class="arrow-r">></span></a>
                <span class="more-info">
                <c:forEach items="${map.lm }" var="k" varStatus="i">
                    <span class="msg">${k.mName }</span>
                    
                   </c:forEach>
                </span>
            </p>
            <p>
                <a href="">开发平台<span class="arrow-r">></span></a>
                <span class="more-info">
                    <span class="msg">1.loremfdafawfaewfefe</span>
                    <span class="msg">2.lorem</span>
                    <span class="msg">3.lorem</span>
                    <span class="msg">4.lorem</span>
                    <span class="msg">5.lorem</span>
                </span>
            </p>
            <p>
                <a href="">知识产权<span class="arrow-r">></span></a>
                <span class="more-info">
                    <span class="msg">1. 版权保护是非常重要的。</span>
       	 			<span class="msg">2. 知识产权能够激励创新。</span>
      				  <span class="msg">3. 保护知识产权有利于经济发展。</span>
       				 <span class="msg">4. 知识产权侵权行为应该受到制裁。</span>
        				<span class="msg">5. 知识产权法律是社会进步的重要保障。</span>
                </span>
            </p>
            <p>
                <a href="">欢喜首映<span class="arrow-r">></span></a>
                <span class="more-info">
                    <span class="msg">1.loremfdafawfaewfefe</span>
                    <span class="msg">2.lorem</span>
                    <span class="msg">3.lorem</span>
                    <span class="msg">4.lorem</span>
                    <span class="msg">5.lorem</span>
                </span>
            </p>
            <p>
                <a href="">关于我们<span class="arrow-r">></span></a>
                <span class="more-info">
                    <span class="msg">1.loremfdafawfaewfefe</span>
                    <span class="msg">2.lorem</span>
                    <span class="msg">3.lorem</span>
                    <span class="msg">4.lorem</span>
                    <span class="msg">5.lorem</span>
                </span>
            </p>
        </div>

        <div class="canner-fr fr">
            <ul class="announce">
                <li class="spec"><a href="">最新公告</a></li>
                <li><a href="">什么?幻视出新电影了......</a></li>
                <li><a href="">勇敢者游戏好评如潮......</a></li>
                <li><a href="">冰雪奇缘这个冬天最热......</a></li>
                <li><a href="">战狼三即将上映......</a></li>
            </ul>
         
        </div>

        <div class="canner">
       <c:forEach items="${map.lm }" var="l">
             <a href="PerServlet?mName=${l.mName }"><img src="mImage/${l.url1 }" alt=""></a>
            
    	</c:forEach>
            <span class="left-arr"> < </span>
            <span class="right-arr">></span>
            <p class="text-info"><a href="">你不看是你的错，不好看是我的错</a></p>
          
        </div>
    </div>
    <!-- 横幅广告介绍 -->
    
    <!-- 第一个主要区域 -->
    <div class="contain bfc" id="chief">
        <!-- 右边 -->
        <div class="aside fr">
            <span class="panel-title">今日票房</span>
            <!-- 电影list -->
            <div class="panel-content bfc">
                <ul>
                   
                    <c:forEach items="${map.l3 }" var="l3" varStatus="index">
                    <li class="ranking-item" >
                        <a href="PerServlet?mName=${l3.mName }">
                            <i class="ranking-index">${index.index+1 }</i>
                            <span class="ranking-movie-name">${l3.mName }</span>
                            <span class="stonefont">${l3.mBox }</span>
                        </a>
                    </li>
                    </c:forEach>
                    
                </ul>
            </div>
            <div class="box-total-wrapper">
                <h3>今日大盘</h3>
                <div class="fr bottom-left">
                    <p>
                        <span class="num">1.40亿</span>
                       
                    </p>
                    <p>
                        <span class="time">北京时间 15:30:50</span>
                        <span class="pull-right">专业版实时票房数据</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 左边 -->
        <div class="main">
            <div class="panelhead">
                <span class="textcolor-red">正在热映(32部)</span>
                <span class="more"><a href="MovieServlet">更多&gt;</a></span>
            </div>
            <!-- 电影列表 -->
            <div class="panel-content">
                <dl class="movies-list">
                <c:forEach items="${map.l }" var="l">
                    <dd class="movie-item">
                        <a href="PerServlet?mName=${l.mName }" class="movie-img"><img src="mImage/${l.url }" alt=""></a>
                        <a href="PerServlet?mName=${l.mName }"><div class="movie-sale">购票</div></a>
                        <i class="imax3d"></i>
                        <i class="integer"><span>${l.mScore }</span></i>
                        <div class="movietitle"></div>
                    </dd>
                  </c:forEach>
                  
                    
                </dl>
            </div>
        </div>
    </div>

    <!-- 第二个主要区域 -->
    <div class="contain bfc" id="chief">
        <!-- 右边 -->
        <div class="aside fr" id="hot-movie">
            <span class="panel-title text-yellow">TOP&nbsp;100</span>
           
            <!-- 电影list -->
            <div class="panel-content bfc">
                <ul>
                <c:forEach items="${map.l2}" var="l" varStatus="index">
                    <li class="ranking-item">
                        <a href="PerServlet?mName=${l.mName }">
                            <i class="ranking-index">${index.index+1 }</i>
                            <span class="ranking-movie-name">${l.mName }</span>
                            <span class="stonefont">${l.mScore }</span>
                        </a>
                    </li>
                    </c:forEach>
                   
                   
                </ul>
            </div>
        </div>
        <!-- 左边 -->
        <div class="main">
            <div class="panelhead">
                <span class="textcolor-blue"> 热播电影</span>
           
              
            </div>
            <!-- 电影列表 -->
            <div class="panel-content">
                <dl class="movies-list movies-list-2">
                  <c:forEach items="${map.l2 }" var="l2">
                    <dd class="movie-item">
                        <a href="PerServlet?mName=${l2.mName }" class="movie-img">
                            <img src="mImage/${l2.url }" alt="">
                        </a>
                        <i class="integer2"><span>${l2.mScore }</span></i>
                        <div class="movietitle2"></div>
                    </dd>
                    </c:forEach>
                    
                </dl>
            </div>
        </div>
    </div>
      
    <!-- 右侧导航栏开始 -->
 
    <!-- 右侧导航栏结束 -->

    <!-- 底部开始 -->
    <div class="footer">
        <p class="special">关于幻视:
            <a >关于我们</a>
            <span>|</span>
            <a >管理团队</a>
            <span>|</span>
            <a >投资者关系</a>&nbsp;友情链接:
            <a >美团网</a>
            <span>|</span>
            <a >格瓦拉</a>
            <span>|</span> 
            <a>美团下载</a>
            <span>|</span>
            <a >欢喜首映</a>   
        </p>
        <p>商务合作邮箱：v@longteng.com 客服电话：10105335 违法和不良信息举报电话：4006019900 </p>
        <p>用户投诉邮箱：tousujubao@meituan.com 舞弊线索举报邮箱：wubijubao@longteng.com </p>
        <p>
            <a >中华人民共和国增值电信业务经营许可证 京B2-20190350 </a>
            <span>|</span>
            <a > 营业性演出许可证 京演（机构）（2019）4094号</a>
        </p>
        
        <p>
            <a >广播电视节目制作经营许可证 （京）字第08478号 </a>
            <span>|</span>
            <a > 网络文化经营许可证 京网文（2019）3837-369号</a>
        </p>
        <p>
            <a >幻视用户服务协议 </a>
            <span>|</span>
            <a> 幻视平台交易规则总则</a>
            <span>|</span>
            <a >隐私政策</a>
        </p>
        <p><a href="">京公网安备 11010102003232号</a></p>
        <p>四川幻视文化传媒有限公司</p>
        <p>©2019 幻视电影 longteng.com</p>
        <p class="last">
            <a><img src="./img/network.png" alt=""></a>
            <a><img src="./img/license.png" alt=""></a>
        </p>
    </div>
    <!-- 底部结束 -->
</body>

<script type="text/javascript">
	$().ready(function(){
		var a=$(".user").html();
		console.log(a);
		if(a==""){
			window.location.href="login.jsp";	
		}	
	})
	
document.addEventListener("DOMContentLoaded", function() {
            let currentIndex = 0;
            const links = document.querySelectorAll(".canner a");
            const images = document.querySelectorAll(".canner img");
            const leftArrow = document.querySelector(".left-arr");
            const rightArrow = document.querySelector(".right-arr");

            function showSlide(index) {
                links.forEach((link, i) => {
                    const img = link.querySelector('img');
                    if (img) {
                        if (i === index) {
                            link.style.display = "block"; // 只显示当前超链接
                            img.classList.add('active'); // 添加class以触发CSS过渡
                        } else {
                            link.style.display = "none"; // 隐藏其他超链接
                            img.classList.remove('active'); // 移除class以触发CSS过渡
                        }
                    }
                });
            }

            function nextSlide() {
                currentIndex = (currentIndex + 1) % images.length;
                showSlide(currentIndex);
            }

            function prevSlide() {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                showSlide(currentIndex);
            }

            rightArrow.addEventListener("click", nextSlide);
            leftArrow.addEventListener("click", prevSlide);

            // 初始化第一张幻灯片
            showSlide(currentIndex);

            // 自动播放幻灯片
            setInterval(nextSlide, 4000); // 每2秒切换一张幻灯片
        });
</script>
</html>